<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改密码</block>
		</cu-custom>
		<form>
			<view class="cu-form-group margin-top shadow-warp"  >
				<view class="title">原密码</view>
				<input class="uni-input" placeholder="请输入原密码" :password="!showPassword1" v-model="myFormData.oldpassword" />
				<view class="action text-lg">
				    <text :class="[showPassword1 ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword1"></text>
				</view>
			</view>
			<view class="cu-form-group margin-top shadow-warp"  >
				<view class="title">新密码</view>
				<input class="uni-input" placeholder="请输入新密码" :password="!showPassword2" v-model="myFormData.password" />
				<view class="action text-lg">
				    <text :class="[showPassword2 ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword2"></text>
				</view>
			</view>
			<view class="cu-form-group margin-top shadow-warp" >
				<view class="title">确认密码</view>
				<input class="uni-input" placeholder="请输入确认密码" :password="!showPassword3" v-model="myFormData.password2" />
				<view class="action text-lg">
				    <text :class="[showPassword3 ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword3"></text>
				</view>
			</view> 
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import api from "@/api/api" 
	export default {
		data() {
			return {
				index: -1,
				showPassword1:false,
				showPassword2:false,
				showPassword3:false,
				switchC: true,
				imgList: [],
				uploadUrl:"/sys/common/upload",
				myFormData:{
					avatar:'',
					realname:'',
					username:'',
					sex:1,
					birthday:'',
					orgCode:'',
					workNo:'',
					phone:'',
					email:'',
					id:'',
					oldpassword:'',
					password:'',
							password2:'',
				},
			};
		},
		onLoad: function (option) {
			console.log("this.$Route.query",this.$Route.query);
			let query=this.$Route.query
			if(query){
				this.myFormData=query;
				if(this.myFormData.sex=='女'){
				  this.switchC = false
				}else if(this.myFormData.sex=='男'){
				  this.switchC = true
				}
				if(this.myFormData.avatar){
				  this.imgList=[this.myFormData.avatar]
				}
				if(!this.myFormData.birthday){
				  this.myFormData.birthday= '无'
				}
				if(this.myFormData.identity=='普通成员'){
				  this.myFormData.identity = 1
				}else if(this.myFormData.identity=='上级'){
				  this.myFormData.identity = 2
				}
				if(this.myFormData.status=='正常'){
				  this.myFormData.status = 1
				}else if(this.myFormData.status=='冻结'){
				  this.myFormData.status = 2
				}
				 this.Avatar=this.myFormData.avatar
	
				Object.keys(this.myFormData).map(key=>{
				  if(this.myFormData[key]=='无'){
					this.myFormData[key] = ''
				  }
				})
				console.log("this.myFormData",this.myFormData)
			}
		},
		methods: {
			changePassword1() {
				this.showPassword1 = !this.showPassword1;
			},
			changePassword2() {
				this.showPassword2 = !this.showPassword2;
			},
			changePassword3() {
				this.showPassword3 = !this.showPassword3;
			},
			onSubmit() {
			  let myForm = this.myFormData
			  console.log(this.myFormData)
			   if(!this.myFormData.oldpassword || this.myFormData.oldpassword.length==0){
			     this.$tip.toast('请输入原密码');
			     return;
			   } 
			   if(!this.myFormData.password || this.myFormData.password.length==0){
			     this.$tip.toast('请输入新密码');
			     return;
			   } 
			   if(this.myFormData.password.length<8){
			     this.$tip.toast('请输入八位数以上的密码');
			     return;
			   } 
			   if(!this.myFormData.password2 || this.myFormData.password2.length==0){
			     this.$tip.toast('请输入确认密码');
			     return;
			   } 
				 if(this.myFormData.password !=this.myFormData.password2){
				   this.$tip.toast('两次密码不一致');
				   return;
				 } 
				this.myFormData.userId = this.$store.getters.userid 
				this.$tip.loading();
				api.pwdedit(this.formateObjToParamStr(this.myFormData)).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.code==200){
						this.$tip.toast('修改成功')
						this.$Router.replace({name:'login'})
						/* uni.navigateTo({
							url: '/pages/user/userdetail'
						}) */
					}else{
							this.$tip.error(res.data.message)
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			  filter(str) { // 特殊字符转义
			  str += ''; // 隐式转换
			  str = str.replace(/%/g, '%25');
			  str = str.replace(/\+/g, '%2B');
			  str = str.replace(/ /g, '%20');
			  str = str.replace(/\//g, '%2F');
			  str = str.replace(/\?/g, '%3F');
			  str = str.replace(/&/g, '%26');
			  str = str.replace(/\=/g, '%3D');
			  str = str.replace(/#/g, '%23');
			  return str;
			},
			 
			  formateObjToParamStr(paramObj) {
			  const sdata = [];
			  for (let attr in paramObj) {
			    sdata.push(`${attr}=${this.filter(paramObj[attr])}`);
			  }
			  return sdata.join('&');
			},
			
			
			

			DateChange(e) {
				this.myFormData.birthday = e.detail.value
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.myFormData.avatar=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
